<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Button
                v-hasC="{
                    name: '-v1-base-project-create',
                    flag: '/v1/base/project/create',
                }"
                type="primary"
                @click="handleAllocation(-1)"
                >新增</Button
            >
            <Table
                highlight-row
                :columns="columns"
                :data="data"
                class="ivu-mt-16"
                :loading="loading"
            >
                <template slot="num" slot-scope="{ row }">
                    <a @click="handleSetups(row)">{{ row.num }}</a>
                </template>
                <template slot-scope="{ row }" slot="status">
                    <Badge
                        v-if="row.status === '1'"
                        status="success"
                        text="正常"
                    />
                    <Badge
                        v-if="row.status === '0'"
                        status="error"
                        text="停用"
                    />
                </template>
                <template slot-scope="{ row }" slot="operation">
                    <a
                        v-hasC="{
                            name: '-v1-base-project-update',
                            flag: '/v1/base/project/update',
                        }"
                        @click="handleAllocation(row)"
                        >编辑</a
                    >
                    <Divider
                        v-hasC="{
                            name: '-v1-base-project-delete',
                            flag: '/v1/base/project/delete',
                        }"
                        type="vertical"
                    />
                    <a
                        v-hasC="{
                            name: '-v1-base-project-delete',
                            flag: '/v1/base/project/delete',
                        }"
                        @click="handleDelete(row)"
                        >删除</a
                    >
                </template>
            </Table>
            <div class="ivu-mt" style="display: flex; justify-content: center;">
                <Page
                    show-total
                    show-elevator
                    show-sizer
                    :total="total"
                    :current.sync="params.page"
                    :page-size="params.pageSize"
                    :page-size-opts="pageOpts"
                    @on-change="formSize"
                    @on-page-size-change="formChangePage"
                />
            </div>
        </Card>
        <Modal
            v-model="modal"
            :title="edit ? '新增' : '编辑'"
            @on-cancel="handleDrawerCancel('formItem')"
        >
            <Form
                :model="formItem"
                :label-width="100"
                ref="formItem"
                :rules="createRules"
            >
                <FormItem label="名称" prop="name">
                    <Input
                        v-model.trim="formItem.name"
                        placeholder="请输入名称"
                    />
                </FormItem>
                <FormItem label="项目简称" prop="name">
                    <Input
                        v-model.trim="formItem.name_sx"
                        placeholder="请输入项目简称"
                    />
                </FormItem>
                <FormItem label="排序">
                    <Input
                        v-width="100"
                        v-model.trim="formItem.sort"
                        placeholder=""
                        type="number"
                        @on-blur="sortNum"
                    />
                </FormItem>
                <FormItem label="状态">
                    <i-switch v-model="formItem.status">
                        <span slot="open">On</span>
                        <span slot="close">Off</span>
                    </i-switch>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="handleDrawerCancel('formItem')">取消</Button>
                <Button
                    type="primary"
                    :loading="remarksloading"
                    @click="handleSubmit('formItem', 1)"
                    >保存</Button
                >
            </div>
        </Modal>
        <Modal
            v-model="modaldel"
            title="删除提醒"
            @on-cancel="cancel" width="420">
            <p >请确认是否删除？</p>
            <div slot="footer">
                <Button type="error" :loading="modal_loading" @click="del">确定删除</Button>
                <Button @click="cancel">取消</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import { projectList, projectCreate, projectUpdate, projectDelete } from '@api/projectsetting';
    export default {
        name: 'diagnosis',
        data () {
            return {
                cityshow: true,
                modal: false,
                loadingcity: false,
                optionscity: [],
                dataprojectlist: [],
                setupModal: false,
                formItem: {
                    id: undefined,
                    name: '',
                    status: '',
                    section_id: '',
                    sort: ''
                },
                projectlist: [],
                columns: [
                    { title: '项目ID', key: 'id', minWidth: 70 },
                    { title: '项目名称', key: 'name', minWidth: 108 },
                    { title: '项目简称', key: 'name_sx', minWidth: 118 },
                    { title: '排序', key: 'sort', minWidth: 150 },
                    { title: '状态', slot: 'status', minWidth: 90 },
                    { title: '操作', slot: 'operation', width: 118 }
                ],
                data: [],
                loading: false,
                edit: true,
                remarksloading: false,
                createRules: {
                    name: [
                        { required: true, message: '请输入项目名称', trigger: 'blur' }
                    ],
                    name_sx: [
                        {
                            required: true,
                            message: '请选择项目简称',
                            trigger: 'blur'
                        }
                    ]
                }, // 模态框验证规则
                params: { page: 1, pageSize: 10 },
                paramsconfig: {
                    id: undefined,
                    relation_baiyou_pname: '',
                    default_city: '',
                    marketing_follow_did: ''
                },
                total: 0,
                pageOpts: [10, 15, 20, 30, 50], // 分页每页数量
                modaldel: false,
                modal_loading: false,
                id: null

            };
        },
        /* 创建完成能访问this实例 */
        mounted () {
            this.initial();
        },
        /* 函数方法集合 */
        methods: {
            /* @函数功能: 初始化 */
            initial () {
                this.askData();
            },
            /* @函数功能: 请求数据 */
            askData () {
                this.loading = true;
                projectList(this.params).then((res) => {
                    this.data = res.list;
                    this.total = res.total;
                    this.loading = false;
                });
            },
            /* @函数功能: 分页 */
            formSize (e) {
                this.params.page = e;
                this.askData();
            },
            /* @函数功能: 每页数量 */
            formChangePage (e) {
                this.params.pageSize = e;
                this.askData();
            },
            sortNum () {
                if (this.formItem.sort < 0) {
                    this.formItem.sort = 0;
                }
            },

            /* 打开模态框 */
            handleAllocation (row) {
                if (row === -1) {
                    this.edit = true;
                    this.formItem = {
                        id: undefined,
                        name: '',
                        name_sx: '',
                        status: true,
                        section_id: '',
                        sort: ''
                    };
                } else {
                    this.edit = false;
                    this.formItem = {
                        id: row.id,
                        name: row.name,
                        name_sx: row.name_sx,
                        status: +row.status === 1,
                        section_id: row.section_id,
                        sort: row.sort
                    };
                }
                this.modal = true;
            },
            /* 取消 */
            handleDrawerCancel (name) {
                this.$refs[name].resetFields();
                this.modal = false;
                this.setupModal = false;
                this.formItem = {
                    id: undefined,
                    name: '',
                    name_sx: '',
                    status: true,
                    section_id: '',
                    sort: ''
                };
                this.paramsconfig = { id: undefined };
            },
            /* 提交 */
            handleSubmit (name, num) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.remarksloading = true;

                        let config = {
                            id: this.formItem.id,
                            name: this.formItem.name,
                            name_sx: this.formItem.name_sx,
                            status: this.formItem.status ? 1 : 0,
                            sort: Number(this.formItem.sort)
                        };
                        if (!this.edit) {
                            projectUpdate(config).then(() => {
                                this.$Message.success('编辑成功');
                                this.askData();
                                this.modal = false;
                                this.remarksloading = false;
                            }).catch(() => {
                                this.remarksloading = false;
                            });
                        } else {
                            projectCreate(config).then(() => {
                                this.$Message.success('新增成功');
                                this.askData();
                                this.modal = false;
                                this.remarksloading = false;
                            }).catch(() => {
                                this.remarksloading = false;
                            });
                        }
                    }
                });
            },
            handleSetups (row) {
                this.$router.push({
                    path: '/setting/clique/power/person',
                    query: { id: row.id }
                });
            },
            // 删除接口
            handleDelete (row) {
                this.modaldel = true
                this.id = row.id
            },
            cancel () {
                this.id = null
                this.modaldel = false
                this.modal_loading = false
            },
            del () {
                this.modal_loading = true
                projectDelete({ id: this.id }).then(() => {
                    this.$Message.success('删除成功');
                    this.askData();
                    this.cancel();
                    this.modal_loading = false
                });
            }
        }
    };
</script>

<style scoped></style>
